<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>海南热带雨林</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="../../layui/css/layui.css" rel="stylesheet">
</head>
<style>
    table {
        text-align: center;
    }

    .layui-table-cell {
        text-align: center !important;
    }

    .layui-layout-admin .layui-header, .layui-btn, .layui-bg-black, .layui-nav, .layui-laypage .layui-laypage-curr .layui-laypage-em {
        background-color: #003078 !important;
    }

    .layui-layout-admin .layui-logo {
        width: 100%;
    }

    .layui-form-item {
        display: inline-block;
    }

    #query, #add {
        position: absolute;
        height: 37px;
        line-height: 37px;
        margin-left: 15px;
    }

    #add {
        margin-left: 95px;
    }


    .layui-header {
        height: 80px !important;
    }

    .layui-layout-admin .layui-side, .layui-layout-admin .layui-body {
        top: 80px !important;
    }

    .layui-nav-tree .layui-nav-child dd.layui-this, .layui-nav-tree .layui-nav-child dd.layui-this a, .layui-nav-tree .layui-this, .layui-nav-tree .layui-this > a, .layui-nav-tree .layui-this > a:hover {
        background-color: #01aaed;
    }

</style>
<body>
<div class="layui-layout layui-layout-admin">

    <!-- 内容主体区域 -->
    <div style="padding: 15px;">
        <div class="layui-row">
            <div class="layui-col-xs12 layui-form">
                <div class="layui-form-item">
                    <div class="layui-input-group">
                        <div class="layui-input-prefix">
                            用户名
                        </div>
                        <input type="text" placeholder="请输入用户名" class="layui-input">
                    </div>
                </div>

                <div class="layui-form-item">
                    <div class="layui-input-group">
                        <div class="layui-input-prefix">
                            所属行业
                        </div>
                        <select>
                            <option value="电子">电子</option>
                            <option value="化工">化工</option>
                            <option value="仪器仪表">仪器仪表</option>
                            <option value="电气机械">电气机械</option>
                        </select>
                    </div>
                </div>

                <a class="layui-btn layui-btn-sm layui-bg-red" lay-event="edit" id="query">
                    <i class="layui-icon layui-icon-search" style="font-size: 15px;margin-right:5px "></i>
                    查询</a>

                <a class="layui-btn layui-btn-sm layui-bg-red" lay-event="edit" id="add">
                    <i class="layui-icon layui-icon-add-1" style="font-size: 15px;margin-right:5px "></i>
                    新增</a>

            </div>

        </div>
        <table class="layui-hide" id="demoTable">
        </table>
    </div>
</div>

</div>

<script type="text/html" id="eventdata-tool">
    <div class="layui-clear-space">
        <button type="button" class="layui-btn layui-btn-sm" lay-on="test-iframe-curl">
            <i class="layui-icon layui-icon-eye" style="font-size: 15px;margin-right:5px ">
            </i>查看
        </button>

        <a class="layui-btn  layui-btn-sm" lay-event="edit"><i class="layui-icon layui-icon-upload-drag"
                                                               style="font-size: 15px;margin-right:5px "></i>导入</a>
    </div>
</script>


<script type="text/html" id="data-tool">
    <div class="layui-clear-space">
        <a class="layui-btn layui-btn-sm" lay-event="detail"><i class="layui-icon layui-icon-survey"
                                                                style="font-size: 15px;margin-right:5px "></i>生产线设置</a>
        <a class="layui-btn layui-btn-sm" lay-event="detail"><i class="layui-icon layui-icon-survey"
                                                                style="font-size: 15px;margin-right:5px "></i>修改</a>
        <a class="layui-btn layui-btn-sm layui-bg-red" style="background-color: red !important;"><i
                class="layui-icon layui-icon-delete"
                style="font-size: 15px;margin-right:5px "></i>删除</a>
    </div>
</script>


<script src="../../layui/layui.js"></script>
<script>
    //JS
    layui.use(['element', 'layer', 'table', 'util'], function () {
        var element = layui.element;
        var layer = layui.layer;
        var util = layui.util;
        var $ = layui.$;
        var table = layui.table;

        // 事件
        util.on('lay-on', {
            'test-iframe-curl': function () {
                layer.open({
                    type: 2,
                    title: '暂降数据查看',
                    shadeClose: true,
                    maxmin: true, //开启最大化最小化按钮
                    area: ['100%', '100%'],
                    content: './暂降数据查看.html'
                });
            }
        })

        //头部事件
        util.event('lay-header-event', {
            menuLeft: function (othis) { // 左侧菜单事件
                layer.msg('展开左侧菜单的操作', {icon: 0});
            },
            menuRight: function () {  // 右侧菜单事件
                layer.open({
                    type: 1,
                    title: '更多',
                    content: '<div style="padding: 15px;">处理右侧面板的操作</div>',
                    area: ['260px', '100%'],
                    offset: 'rt', // 右上角
                    anim: 'slideLeft', // 从右侧抽屉滑出
                    shadeClose: true,
                    scrollbar: false
                });
            }
        });


        // 创建表格实例
        table.render({
            elem: '#demoTable',
            headers: {
                "Access-Control-Allow-Origin": "*"
            },
            page: true,
            cols: [[
                {checkbox: true, fixed: true},
                {field: 'no', title: '序号', width: 80},
                {field: 'username', title: '用户名', width: 150},
                {field: 'industry', title: '所属行业', width: 150},
                {field: 'area', title: '所属区域',},
                {field: 'productCount', title: '产线数', width: 120},
                {field: 'lineCount', title: '进线数', width: 120},
                {title: '暂降数据', toolbar: '#eventdata-tool'},
                {title: '操作', toolbar: '#data-tool'}
            ]],
            "data": [
                {
                    "no": 1,
                    "username": "海某化工",
                    "industry": "化工",
                    "area": "海某省/海某市/长江街道",
                    "lineCount": 3,
                    "productCount": 2
                },
                {
                    "no": 2,
                    "username": "海某化工",
                    "industry": "化工",
                    "area": "海某省/海某市/长江街道",
                    "lineCount": 2,
                    "productCount": 2
                },
                {
                    "no": 3,
                    "username": "海某化工",
                    "industry": "化工",
                    "area": "海某省/海某市/长江街道",
                    "lineCount": 2,
                    "productCount": 2
                },
                {
                    "no": 4,
                    "username": "海某化工",
                    "industry": "化工",
                    "area": "海某省/海某市/长江街道",
                    "lineCount": 2,
                    "productCount": 2
                },
                {
                    "no": 5,
                    "username": "海某化工",
                    "industry": "化工",
                    "area": "海某省/海某市/长江街道",
                    "lineCount": 1,
                    "productCount": 2
                },
                {
                    "no": 6,
                    "username": "海某化工",
                    "industry": "化工",
                    "area": "海某省/海某市/长江街道",
                    "lineCount": 3,
                    "productCount": 2
                },
                {
                    "no": 7,
                    "username": "海某化工",
                    "industry": "化工",
                    "area": "海某省/海某市/长江街道",
                    "lineCount": 2,
                    "productCount": 2
                },
                {
                    "no": 8,
                    "username": "海某化工",
                    "industry": "化工",
                    "area": "海某省/海某市/长江街道",
                    "lineCount": 2,
                    "productCount": 2
                },
                {
                    "no": 9,
                    "username": "海某化工",
                    "industry": "化工",
                    "area": "海某省/海某市/长江街道",
                    "lineCount": 2,
                    "productCount": 2
                },
                {
                    "no": 10,
                    "username": "海某化工",
                    "industry": "化工",
                    "area": "海某省/海某市/长江街道",
                    "lineCount": 2,
                    "productCount": 2
                }
            ]
        });

    });
</script>
</body>
</html>